﻿<!--@Knockout-->
<div style="text-align:center;height:500px; width:800px; margin: 0 auto">
    <div style="max-height:450px" data-bind="dxDataGrid: {
        dataSource: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        paging: { pageSize: 7 },
        editing: {
            mode: selectBoxValue,
            allowUpdating: true,
            allowAdding: true,
            allowDeleting: true
        }
    }"></div>
    <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
        <div style="display:table-cell;vertical-align:middle">Choose an edit mode:&nbsp;</div>
        <div style="display:table-cell;width:150px" data-bind="dxSelectBox: {
            dataSource: selectBoxOptions,
            valueExpr: 'value',
            displayExpr: 'name',
            value: selectBoxValue
        }"></div>
    </div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="demoController" style="text-align:center; height:500px; max-width:800px; margin: 0 auto">
    <div style="height:500px; width:800px">
        <div style="max-height:450px" dx-data-grid="{
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 7 },
            editing: {
                allowUpdating: true,
                allowAdding: true,
                allowDeleting: true
            },
            bindingOptions: {
                'editing.mode': 'selectBoxValue'
            }
        }"></div>
        <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
            <div style="display:table-cell;vertical-align:middle">Choose an edit mode:&nbsp;</div>
            <div style="display:table-cell;width:150px" ng-model="selectBoxValue" dx-select-box="{
                dataSource: selectBoxOptions,
                valueExpr: 'value',
                displayExpr: 'name'
            }"></div>
        </div>
    </div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div style="text-align:center;height:500px; width:800px; margin: 0 auto">
    <div id="gridContainer" style="max-height:450px"></div>
    <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
        <div style="display:table-cell;vertical-align:middle">Choose an edit mode:&nbsp;</div>
        <div style="display:table-cell;width:150px" id="selectBoxContainer"></div>
    </div>
</div>
<!--/@jQuery-->